<template>
    <el-container direction="vertical">
        <el-table
                :data="classes"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="60">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="分类名">
                <template slot-scope="scope">
                    <el-input size="mini" v-model="scope.row.name"></el-input>
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template slot-scope="scope">
                    <el-button size="mini" icon="el-icon-edit" @click="showLeafEditVisible(scope.$index)">子分类</el-button>
                    <el-button
                            size="mini"
                            :type="scope.row.visible ? 'warning' : 'success'"
                            :icon="scope.row.visible ? 'el-icon-turn-off' : 'el-icon-open'"
                            @click="scope.row.visible = !scope.row.visible">{{scope.row.visible ? '隐藏' : '显示'}}
                    </el-button>
                    <el-button size="mini"
                               :type="scope.row.id === '#' ? 'primary':'danger'"
                               :icon="scope.row.id === '#' ? 'el-icon-plus':'el-icon-check'"
                               @click="scope.row.id === '#' ? addClass(scope.$index) : saveClass(scope.$index)">{{scope.row.id === '#' ? '增加' : '保存'}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                :title="leafEditTitle"
                :visible.sync="leafEditVisible"
                :before-close="closeLeafEdit"
                width="600px"
                style="text-align: center">
            <el-transfer ref="leafTransfer" style="text-align: left; display: inline-block" v-model="leafEdit" :data="classes" :props="{key: 'id',label: 'name'}" :titles="['所有分类', '子分类']"></el-transfer>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeLeafEdit">取 消</el-button>
                <el-button type="primary" @click="setLeaf()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="添加新分类"
                :visible.sync="addClassVisible">
        </el-dialog>
    </el-container>
</template>

<script>
    import AdminService from '../../services/admin.service';
    import Loading from "../../utils/loading";

    export default {
        name: "AdminClass",
        data() {
            return {
                addClassVisible: false,
                leafEditVisible: false,
                leafEditTitle: '提示',
                leafEditIdx: -1,
                leafEdit: [],
                classes: null,
            };
        },

        methods: {
            showLeafEditVisible(index) {
                this.leafEditIdx = index;
                this.leafEditTitle = '请选择' + this.classes[index].name + '的子类';
                this.leafEdit = this.classes[index].leaf;
                this.classes[index].disabled = true;
                this.leafEditVisible = true;
                this.$nextTick(function () {
                    this.$refs.leafTransfer._data.leftChecked.splice(0, this.$refs.leafTransfer._data.leftChecked.length);
                    this.$refs.leafTransfer._data.rightChecked.splice(0, this.$refs.leafTransfer._data.rightChecked.length);
                });
            },
            closeLeafEdit() {
                if (this.leafEditIdx === -1) {
                    return;
                }
                this.classes[this.leafEditIdx].disabled = false;
                this.leafEdit = [];
                this.leafEditIdx = -1;
                this.leafEditVisible = false;
            },
            setLeaf() {
                if (this.leafEditIdx === -1) {
                    return;
                }
                this.classes[this.leafEditIdx].leaf = this.leafEdit;
                this.classes[this.leafEditIdx].disabled = false;
                this.leafEdit = [];
                this.leafEditIdx = -1;
                this.leafEditVisible = false;
            },
            async saveClass(index) {
                let cls = this.classes[index];
                if (cls.name.trim().length === 0) {
                    this.$message.error('分类名不能为空!');
                    return;
                }
                let res = await AdminService.classUpdate(cls);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$message.success('保存成功！');
            },
            async addClass(index) {
                let cls = this.classes[index];
                if (cls.name.trim().length === 0) {
                    this.$message.error('分类名不能为空!');
                    return;
                }
                let res = await AdminService.classAdd(cls);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                    return;
                }
                this.classes[index].id = res.data.id;
                this.classes[index].disabled = false;
                this.classes.push({
                    id: '#',
                    name: '',
                    leaf: [],
                    visible: true,
                    disabled: true,
                });
                this.$message.success('新增成功！');
            },
        },

        async mounted() {
            Loading.showLoad('正在加载分类列表...');
            let res = await AdminService.classes();
            if (res.code === 0) {
                this.$message.error(res.msg);
                Loading.hideLoad();
                return;
            }
            this.classes = res.data;
            this.classes.push({
                id: '#',
                name: '',
                leaf: [],
                visible: true,
                disabled: true,
            });
            Loading.hideLoad();
        },
    };
</script>

<style scoped lang="scss">
</style>
